<template>
	<view class="calendar">
		<view class="calendar-title">
			<view class="calendar-title-sub" v-for="(item,index) in calendarTitle" :key="index">
				{{item}}
			</view>
		</view>
		<view class="calendar-time" v-for="(item,index) in calendarTime" :key="'v'+index">
			<view class="calendar-time-sub" v-for="(ele,index) in item" :key="'v'+index">
				<view class="calendar-item calendar-active" v-if="isActive == ele">
					{{ele}}
				</view>
				<view class="calendar-item calendar-visited" v-else-if="visitedSign.includes(ele)">
					{{ele}}
				</view>
				<view class="calendar-item calendar-hover" v-else>
					{{ele}}
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				calendarTime: [],
				calendarTitle: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
			}
		},
		props: {
			isActive: {
				type: Number | String,
				default: () => {
					const time = new Date()
					return time.getDate()
				}
			},
			visitedSign: {
				type: Array,
				default: () => ([1, 3, 5, 7])
			}
		},
		mounted() {
			const time = new Date()
			const year = time.getFullYear()
			const month = time.getMonth() + 1
			time.setMonth(month);
			time.setDate(0);
			 let dayNum = time.getDate()
			
			let weekStart = new Date(year + '/' + month + '/' + 1)
			let weekEnd = new Date(year + '/' + month + '/' + dayNum)


			let weekS = this.getWeek(weekStart);
			let weekE = this.getWeek(weekEnd);

			let temp = []
			for (let i = 1; i < dayNum + 1; i++) {
				temp.push(i)
			}
			for (let j = 1; j < weekS; j++) {
				temp.unshift('')
			}
			for (let j = 1; j < 7 - weekE + 1; j++) {
				temp.push('')
			}

			let arr = []
			for (let k = 0; k < Math.ceil(temp.length / 7); k++) {
				this.calendarTime.push(temp.slice(k * 7, k * 7 + 7))
			}

			const day = time.getDate()

			console.log(dayNum, day, this.calendarTime)


		},
		methods: {
			getWeek(weekDate) {
				let week = ''
				switch (weekDate.getDay()) {
					case 0:
						week = "7";
						break;
					case 1:
						week = "1";
						break;
					case 2:
						week = "2";
						break;
					case 3:
						week = "3";
						break;
					case 4:
						week = "4";
						break;
					case 5:
						week = "5";
						break;
					case 6:
						week = "6";
						break;
				}
				return week
			}
		}
	}
</script>

<style lang="scss">
	.calendar {
		width: 620rpx;
		margin: auto;

		.calendar-title {
			display: flex;
			color: #D9D9D9;
			font-size: 11rpx;

			.calendar-title-sub {
				flex: 1;
				text-align: center;
			}
		}


		.calendar-time {
			display: flex;
			font-size: 20rpx;

			.calendar-time-sub {
				flex: 1;
				text-align: center;
				height: 72rpx;
				line-height: 72rpx;
				margin: 20rpx 8rpx;
				.calendar-item {
					border-radius: 10rpx;
					font-weight: bold;
					font-size: 40rpx;
				}

				.calendar-hover {
					background-color: #F1F2F2;
					color: #C9C9CB;
				}

				.calendar-active {
					background-color: #4CD964;
					color: #FFFFFF;
				}

				.calendar-visited {
					background-color: #FCBD3E;
					color: #FFFFFF;
				}
			}
		}

	}
</style>
